::ng-deep {
  a {
    &.grey-text {
      @media (hover: hover) {
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

.status-container {
  min-height: calc(100% - 30px);
}

gridster {
  background-color: inherit;
}

.widget-control-button {
  position: absolute;
  float: right;
  top: 0 !important;
  right: 2px !important;
  padding: 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease-in;
  color: #999999;

  &:active,
  &:hover,
  &:focus {
    transform: scale(1.1);
  }

  @media (max-width: 767px) {
    opacity: 1;
  }
}

.widget-item {
  @media (hover: hover) {
    &:hover,
    &:active {
      .widget-control-button {
        opacity: 1;
      }
    }
  }
}

gridster {
  &.mobile {
    #UpdateInfoWidgetComponent,
    #SystemInfoWidgetComponent,
    #WeatherWidgetComponent,
    #BridgesWidgetComponent,
    #ClockWidgetComponent {
      height: unset !important;
    }

    #CpuWidgetComponent,
    #NetworkWidgetComponent,
    #MemoryWidgetComponent,
    #UptimeWidgetComponent {
      height: unset !important;
      padding-bottom: 10px;
    }

    #HapQrcodeWidgetComponent {
      height: 360px !important;
    }

    #AccessoriesWidgetComponent {
      height: unset !important;
      border: none !important;
    }
  }
}
